import React, { Component } from 'react';
import {inject, observer} from 'mobx-react';
import { Button , Divider , Popconfirm } from 'antd';
import {toJS} from 'mobx';
import Table from '@/template/components/Table';
import AddDialog from "@/components/ComponentA"
import EditDialog from "@/components/ComponentB"

@inject ('tmplStore')
@observer
export default class componentName extends Component {
  constructor(props) {
    super(props);
    const that = this;
    let {tmplStore:{editShow , delItem}} = this.props;
    let {confirm} = that;
    this.columns = [
      {
        title: '编号',
        width: 200,
        dataIndex: 'key',
      },
      {
        title: '名字',
        width: 200,
        dataIndex: 'name',
      },
      {
        title: '操作', dataIndex: '', key: 'x', render: (text) => 
        <span>
          <a onClick={()=>editShow(text)} href="javascript:;">编辑</a>
          <Divider type="vertical"/>
          <Popconfirm placement="top" title="确定删除用户信息？" onConfirm={delItem} okText="确定" cancelText="cancel">
            <a href="javascript:;">删除</a>
          </Popconfirm>
        </span>
      }
    ]
  }
  confirm(){
  }
  componentDidMount() {
    this.props.tmplStore.init();    
  }
  render() {
    const {columns} = this;
    let {tmplStore:{list,pagination,addShow,item}} = this.props;
    return (
      <div>
        { item && !!!item.id && <AddDialog/>}
        { item && item.id && <EditDialog/>}
        <h2>标题</h2>
        <div>
          <Button onClick={addShow} type="primary">新增</Button>
        </div>
        <Table className="student_result_table" pagination = { pagination } columns={columns} data={list} />
      </div>
    )
  }
}
